<template>
    <div class="like">
        <Card>
            <span>猜你喜欢</span>
        </Card>
        <ul>
            <li v-for="(item, index) in LikeList" :key="index" @click="goDateil(item.id)">
                <h2>
                    <img v-lazy="item.imgUrl" alt="">
                </h2>
                <h3>{{item.name}}</h3>
                <div class="price">
                    <span>￥</span>
                    <b>{{item.price}}</b>
                </div>
            </li>
        </ul>
  </div>
</template>

<script>
import Card from '@/components/home/Card.vue'
export default {
    props: {
        LikeList: Array
    },
    data() {
        return {
            
        }
    },
    components: {
        Card
    },
    methods: {
        goDateil(id) {
            this.$router.push({
                path: '/detail',
                query: {
                    id: id
                }
            })
        }
    }
}
</script>

<style scoped>
    .like ul {
        display: flex;
        flex-wrap: wrap;
    }
    .like ul li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
    }
    .like h3 {
        padding: 0 .08rem;
        width: 95%;
        font-size: .24rem;
        color: #222;
        overflow: hidden;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .like img {
        width: 3.52rem;
        height: 3.52rem;
    }
    .like ul li > div {
        width: 96%;
        padding: .12rem;
        text-align: left;
        color: #FF0000;
    }
    .like ul li > div span {
        font-size: .24rem;
    }
    .like ul li > div b{
        font-weight: 600;
        font-size: .32rem;
        
    }
    .like img[lazy=loading] {
        background-color: #F7F7F7;
    }
</style>>
